<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>登录</title>
	<link rel="stylesheet" href="./component/pear/css/pear.css" />
	<link rel="stylesheet" href="./admin/css/other/login.css" />
	<link rel="stylesheet" href="./admin/css/variables.css" />
	   <script>if (window.self != window.top) { top.location.reload(); }</script>
</head>

<body>
	<div class="login-page" style="background-image: url(./admin/images/background.svg)">
		<div class="layui-row">
			<div class="layui-col-sm6 login-bg layui-hide-xs">
				<img class="login-bg-img" src="./admin/images/banner.png" alt="" />
			</div>
			<div class="layui-col-sm6 layui-col-xs12 login-form">
				<div class="layui-form">
					<div class="form-center">
						<div class="form-center-box">
							<div class="top-log-title">
								<img class="top-log" src="./admin/images/logo.png" alt="" />
								<span>恩爸编程</span>
							</div>
							<div class="top-desc">
								恩爸编程-用户角色权限管理
							</div>
							<div style="margin-top: 30px;">
								<div class="layui-form-item">
									<div class="layui-input-wrap">
										<div class="layui-input-prefix">
											<i class="layui-icon layui-icon-username"></i>
										</div>
										<input lay-verify="required" lay-vertype="tips" name="username" placeholder="账户"
											autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<div class="layui-input-wrap">
										<div class="layui-input-prefix">
											<i class="layui-icon layui-icon-password"></i>
										</div>
										<input type="password" name="password" value=""
											lay-verify="required|confirmPassword" lay-vertype="tips" placeholder="密码"
											autocomplete="off" class="layui-input" lay-affix="eye">
									</div>
								</div>
								<div class="tab-log-verification">
									<div class="verification-text">
										<div class="layui-input-wrap">
											<div class="layui-input-prefix">
												<i class="layui-icon layui-icon-auz"></i>
											</div>
											<input lay-verify="required" lay-vertype="tips" name="captcha" value=""
												placeholder="验证码" autocomplete="off" class="layui-input">
										</div>
									</div>
									<img id="captcha" src="" alt="" class="verification-img" />
								</div>
								<!--  
								<div class="layui-form-item">
									<div class="remember-passsword">
										<div class="remember-cehcked">
											<input type="checkbox" name="like1[write]" lay-skin="primary" title="自动登录">
										</div>
									</div>
								</div>
							-->
								<div class="login-btn">
									<button type="button" lay-submit lay-filter="login" class="layui-btn login">登
										录</button>
								</div>
								<!--  
								<div class="other-login">
									<div class="other-login-methods">
										其他方式
									</div>
									<div class="greenText">注册账号</div>
								</div>
								-->
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 资 源 引 入 -->
	<script src="./component/layui/layui.js"></script>
	<script src="./component/pear/pear.js"></script>
	<script>
		layui.use(['form', 'button', 'popup', 'toast', 'AjaxUtils'], function () {
			var form = layui.form;
			var button = layui.button;
			var popup = layui.popup;
			var $ = layui.$;
			var toast = layui.toast;
			var AjaxUtils = layui.AjaxUtils;

			function getCaptcha() {
				AjaxUtils.request(
					{
						url: '/login/captcha',
						type: 'GET'
					}, function (data) {
						// 展示验证码
						$("#captcha").attr("src", data.image);
						// 本地缓存验证码键
						localStorage.setItem("captchaKey", data.key);
					},
					function (errMsg) {
						toast.error({
							message: errMsg,
						});
					}
				);
			}
			getCaptcha();

			// 变更验证码
			document.getElementById('captcha').addEventListener('click', function () {
				getCaptcha();
			});

			// 登 录 提 交
			form.on('submit(login)', function (data) {
				/// 验证
				var field = data.field; // 获取表单字段值

				// 显示填写结果
				// layer.alert(JSON.stringify(field), {
				// 	title: '显示填写结果'
				// });


				AjaxUtils.request(
					{
						url: '/auth/user/login',
						data: {
							"username": field.username,
							"password": field.password,
							"captchaKey": localStorage.getItem("captchaKey"),
							"captchaValue": field.captcha
						},
						type: 'POST'
					}, function (data) {
						// 本地缓存token
						localStorage.setItem("token", data)

						// 跳转首页
						button.load({
							elem: '.login',
							time: 1500,
							done: function () {
								popup.success("登录成功", function () {
									location.href = "./index.html"
								});
							}
						})
					},
					function (errMsg) {
						toast.error({
							message: errMsg,
						});
					}
				);

				// 阻止默认 form 跳转
				return false;
			});
		})



	</script>
</body>

</html>